<template>
  <div class="container">
    <el-upload class="upload-container" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
      :accept="'.docx,.xlsx,.xls,.doc'" :before-upload="beforeUpload" @change="handleChange">
      <div class="upload-content">
        <h3 class="title">模板导入试题</h3>
        <p class="tip red-text">请先下载格式模板，参考模板，调整自己的文档格式，再进行上传</p>

        <div class="cards-wrapper">
          <!-- Word Card -->
          <div class="card ">
            <img src="@/assets/common/wordicon.png" alt="Word Icon" class="icon">
            <h4>Word模板导入</h4>
            <ul class="custom-list">
              <li><span class="number">1.</span>请使用Office软件，不要使用WPS</li>
              <li><span class="number">2.</span>请使用.docx的文档格式 </li>
              <li><span class="number">3.</span>支持公式/图片导入</li>
              <li><span class="number">4.</span>不能使用文档的自动编号功能，编辑试题序号 </li>
              <li><span class="number">5.</span>按照模板格式，编辑输入试题文档 </li>
            </ul>
            <el-button type="primary" plain @click.native.stop="downloadTemplate('word')"
              class="download-btn">Word模板下载</el-button>
          </div>

          <!-- Excel Card -->
          <div class="card ">
            <img src="@/assets/common/excelicon.png" alt="Excel Icon" class="icon">
            <h4>Excel模板导入</h4>
            <ul class="custom-list">
              <li><span class="number">1.</span>支持图片上传，图片放在单元格以内</li>
              <li><span class="number">2.</span>不支持公式</li>
              <li><span class="number">3.</span>支持章节的编辑导入</li>
              <li><span class="number">4.</span>按照模板格式，编辑输入试题文档</li>
              <li><span class="number">5.</span>案例分析/案列题批量导入，请单独下载Excel案例分析模板 </li>
            </ul>
            <el-button type="success" plain class="download-btn"
              @click.native.stop="downloadTemplate('excel')">Excel模板下载</el-button>
            <!-- <el-button type="success" plain class="download-btn">Excel案例分析模板下载</el-button> -->
          </div>
        </div>
      </div>
      <el-button size="small" type="primary">上传题库</el-button>
    </el-upload>

    <p class="footer-tip">
      案例分析不支持模板导入，请点击手动上传
    </p>
  </div>
</template>

<script>
export default {
  name: 'excelExprotSctk',
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    beforeUpload(file) {
      const validTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',     // .xlsx
        'application/msword',     // .doc
        'application/vnd.ms-excel']; // .xls

      const isValid = validTypes.includes(file.type);

      if (!isValid) {
        this.$message.error('只能上传 Word 或 Excel 文件！');
      }

      return isValid;
    },
    handleChange(file, fileList) {
      console.log('File uploaded:', file);
    },
    downloadTemplate(type) {
      // event.stopPropagation(); // 阻止事件冒泡到 el-upload
      console.log('准备下载', type);

    }
  }
};
</script>

<style scoped>
.container {
  border: 1px dashed #ccc;
  /* 默认灰色边框 */
  padding: 20px;
  /* transition: border-color 0.3s ease; */
  /* 可选：添加颜色过渡动画 */
}

.container:hover {
  border-color: #409EFF;
  /* 鼠标移入时变为蓝色 */
}

.upload-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.upload-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
}

.title {
  text-align: center;
}

.red-text {
  color: red;
  text-align: center;
}

.cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

.card {
  flex: 1 1 calc(50% - 10px);
  /* 自动均分两列，减去gap */
  min-width: 300px;
  /* 防止过小导致内容挤在一起 */
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-sizing: border-box;
}

.icon {
  display: block;
  margin: 0 auto 10px;
  width: 60px;
  height: auto;
}

.custom-list {
  list-style-type: none;
  /* 去掉 li 的圆点 */
  padding-left: 20;
  /* 移除默认的左内边距 */
}

.custom-list li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.number {
  display: inline-block;
  width: 20px;
  /* 设置固定宽度以对齐编号 */
  text-align: right;
  /* 右对齐编号 */
  margin-right: 5px;
  /* 编号与文本之间的间距 */
}

.download-btn {
  margin: 10px auto 0;
  display: block;
}

.footer-tip {
  text-align: center;
  color: gray;
  margin-top: 20px;
}
</style>